<template>
  <div class="order-page" v-if="order.orderId">
    <!-- 面包屑导航 -->
    <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>我的好茶仓</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: '/user/order'}">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/user/order?status=' + $route.query.status">我的订单</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 订单状态 -->
    <div class="status-wrapper">
      <div class="status-box">
        <p class="status-type">{{orderStatusTypes.Types[order.orderStatus]}}</p>
        <!-- 待付款 -->
        <div v-if="order.orderStatus == 1">
          <p class="time-out" v-if="order.RemainingTime"><i class="el-icon-time"></i>剩余:{{order.RemainingTime}}</p>
          <span class="btn-pay" @click="payNow(orderId)">立即支付</span>
          <el-button class="btn-cancel" type="text" size="mini" @click="cancelOrder(orderId)">取消订单</el-button>
        </div>
        <!-- 待发货 -->
        <div v-if="order.orderStatus == 2">
          <span class="btn-pay" @click="hastenGood">催促发货</span>
        </div>
        <!-- 待收货 -->
        <div v-if="order.orderStatus == 3">
          <span class="btn-pay" @click="confirmReceipt(order.orderId)">确认收货</span>
        </div>
        <!-- 已完成 -->
        <div v-if="order.orderStatus == 4"></div>
        <!-- 待确认 -->
        <div v-if="order.orderStatus == 7">
          <el-button class="btn-cancel" type="text" size="mini" @click="cancelOrder(orderId)">取消订单</el-button>
        </div>
      </div>
      <div class="step-box">
        <p class="tips">您的订单已生成，系统将为您保留24小时，如超时仍未支付订单将自动关闭！</p>
        <el-steps class="order-steps" :active="orderStep" align-center>
          <el-step title="1.提交订单">
            <i class="icon-step1" :class="{'active': orderStep >= 0}" slot="icon"></i>
          </el-step>
          <el-step title="2.支付成功">
            <i class="icon-step2" :class="{'active': orderStep >= 1}" slot="icon"></i>
          </el-step>
          <el-step title="3.仓库发货">
            <i class="icon-step3" :class="{'active': orderStep >= 2}" slot="icon"></i>
          </el-step>
          <el-step title="4.等待收货">
            <i class="icon-step4" :class="{'active': orderStep >= 3}" slot="icon"></i>
          </el-step>
          <el-step title="5.完成">
            <i class="icon-step5" :class="{'active': orderStep >= 4}" slot="icon"></i>
          </el-step>
        </el-steps>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="order-info" v-if="order.orderId">
      <h4 class="title">订单信息</h4>
      <div class="details">
        <el-row v-if="order.address">
          <el-col class="text" :span="24">订单编号：{{order.orderId}}</el-col>
          <el-col class="text" :span="24">下单时间：{{order.createTime}}</el-col>
          <el-col class="text" :span="12">收货地址：{{order.area}}</el-col>
          <el-col class="text" :span="4">收货人：{{order.address.name}}</el-col>
          <el-col class="text" :span="4">{{order.address.mobile}}</el-col>
          <el-col class="text" :span="24">应付金额：¥ {{order.payPrice.toFixed(2)}}元</el-col>
        </el-row>
      </div>
    </div>
    <!-- 订单货品 -->
    <div class="order-goods">
      <div class="hd">
        <span class="good">商品</span>
        <span class="price">单价（元）</span>
        <span class="amount">数量</span>
        <span class="selloff">优惠（元）</span>
        <span class="sum">金额（元）</span>
      </div>
      <div class="bd">
        <div class="store-box" v-for="(store, si) in order.shops" :key="si">
          <div class="store-name">供应商：{{store.storeName}}</div>
          <div class="good-box clearfix" v-for="(good, gi) in store.products" :key="gi">
            <div class="goods-img">
              <img :src="good.productCover" width="100%" height="100%">
            </div>
            <div class="goods-name">{{good.name}}</div>
            <div class="goods-info">
              <div class="good">
                <div class="goods-spec">规格:{{good.attributeName}}</div>
              </div>
              <div class="good-price price">
                ¥{{good.sellPrice}}
                <span class="original-price" v-if="good.originalPrice">¥{{good.originalPrice}}</span>
              </div>
              <div class="good-amount amount">x {{good.amount}}</div>
              <div class="good-selloff selloff" :class="{'active': !good.isGift}">
                <span v-if="good.orderProductReduceMoney">优惠：{{good.orderProductReduceMoney}}</span>
                <span v-else>—</span>
                <el-tooltip class="desc" effect="light"  placement="right" v-if="good.activityNames && good.activityNames.length">
                  <div slot="content">{{good.activityNames.toString()}}</div>
                  <i class="el-icon-question el-icon--right"></i>
                </el-tooltip>
              </div>
              <div class="good-sum sum">¥{{good.prices.toFixed(2)}}</div>
            </div>
          </div>
          <div class="store-foot clearfix">
            <div class="remark">
              <!-- 备注：<input class="input-remark" type="text" v-model="store.buyerRemark" placeholder="告诉卖家您的额外需求" disabled/> -->
              备注：<span>{{store.buyerRemark ? store.buyerRemark : '无'}}</span>
            </div>
            <div class="store-total">
              <p>运费：0.00</p>
              <p>店铺合计：¥{{store.shopTotalPrice.toFixed(2)}}元</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单总览 -->
    <div class="order-census">
      <p class="tips">发票说明：该订单金额不含税，含税发票可在我的开票中心申请。</p>
      <p>货品总金额：¥{{order.totalPrice.toFixed(2)}}元</p>
      <p v-if="order.couponDiscountsPrice">优惠券：- {{order.couponDiscountsPrice}}元</p>
      <p v-if="order.discountsPrice">店铺优惠：- {{order.discountsPrice}}元</p>
      <p>运费总计: 0</p>
      <p>应付金额： <span class="price">¥{{order.payPrice.toFixed(2)}}元</span></p>
    </div>
  </div>
</template>

<script>
import { getAreaName } from '@/util/getAreaName'
import { orderStatusTypes } from '@/util/enums'
export default {
  data () {
    return {
      orderStep: 0, // 订单进度
      orderStatusTypes: orderStatusTypes, // 订单状态类型
      orderId: this.$route.query.orderId || '', // 订单编号
      order: {} // 订单信息
    }
  },
  mounted () {
    this.getOrderDetail()
  },
  methods: {
    // 获取订单详情
    getOrderDetail () {
      this.$http.post(this.$api + '/pc/order/getOrderDetail', {
        orderId: this.orderId
      }).then(res => {
        if (res.responseCode === '0000') {
          this.order = res.data
          let area = [res.data.address.province, res.data.address.city, res.data.address.district]
          let areaStr = getAreaName(area) + res.data.address.address
          this.order.area = areaStr
          switch (res.data.orderStatus) {
            case 1: // 待付款
              this.orderStep = 0
              break
            case 2: // 待发货
              this.orderStep = 1
              break
            case 3: // 待收货
              this.orderStep = 2
              break
            case 4: // 已完成
              this.orderStep = 4
              break
            case 6: // 已失效
              this.orderStep = 0
              break
          }
        }
      })
    },
    // 取消订单
    cancelOrder (id) {
      this.$confirm('是否确认取消该订单？', '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning'
      }).then(() => {
        this.$http.post(this.$api + '/pc/order/closeOrder', {
          porderId: id
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getOrderDetail()
                this.getOrderNum()
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: this.$store.state.duration,
          message: '已取消该操作'
        })
      })
    },
    // 催发货
    hastenGood () {
      this.$message.info({
        duration: this.$store.state.duration,
        message: '您的催货请求已发送！'
      })
    },
    // 确认收货
    confirmReceipt (id) {
      this.$confirm('是否确认收货？', '提示', {
        confirmButtonText: '',
        cancelButtonText: '',
        type: 'warning'
      }).then(() => {
        this.$http.post(this.$api + '/pc/order/confirmReceive', {
          orderId: id
        }).then(res => {
          if (res.responseCode === '0000') {
            this.$message({
              type: 'success',
              duration: this.$store.state.duration,
              message: res.responseMsg,
              onClose: () => {
                this.getOrderDetail()
              }
            })
          } else {
            this.$message.error({
              duration: this.$store.state.duration,
              message: res.responseMsg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          duration: this.$store.state.duration,
          message: '已取消该操作'
        })
      })
    },
    // 立即支付
    payNow (id) {
      this.$router.push({
        path: '/order/payment',
        query: {
          orderId: id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/basic.scss';
.order-page {
  margin: auto;
  width: 1200px;
  .breadcrumb {
    margin: 20px 0;
  }
  .status-wrapper {
    margin: 25px 0;
    height: 224px;
    background: url('../../assets/images/order-step-bg.png');
    .status-box {
      float: left;
      padding-top: 30px;
      width: 245px;
      text-align: center;
      .status-type {
        font-size: 22px;
        color: $red;
      }
      .time-out {
        margin-top: 15px;
        font-size-adjust: 14px;
        color: $f_sub;
      }
      .btn-pay {
        display: block;
        margin: 15px auto 0;
        width: 80px;
        height: 24px;
        line-height: 24px;
        color: $red;
        font-size: 14px;
        border: solid 1px $red;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn-cancel {
        color: $f_sub;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .step-box {
      position: relative;
      float: left;
      padding: 80px 100px 0 100px;
      width: 955px;
      .tips {
        position: absolute;
        top: 30px;
        left: 40px;
        color: $f_normal;
        font-size: $fz_14;
      }
    }
  }
  .order-info {
    margin: 25px 0;
    background: #ffffff;
    border: solid 1px $border_color;
    .title {
      padding-left: 20px;
      height: 45px;
      line-height: 45px;
      font-size: $fz_16;
      color: $f_main;
      font-weight: normal;
      background: #fcfcfc;
      border-bottom: 1px solid $border_color;
    }
    .details {
      padding: 20px;
      .text {
        font-size: $fz_14;
        line-height: 24px;
        color: $f_normal;
      }
    }
  }
  .order-goods {
    .hd {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 30px;
      text-align: center;
      font-size: $fz_14;
      background: #ffffff;
      border: 1px solid $border_color;
      border-bottom: 0;
    }
    .bd {
      .store-box {
        margin-bottom: 20px;
        padding: 0 20px;
        background: #ffffff;
        border: solid 1px $border_color;
        .store-name {
          padding: 15px 0 20px;
          font-size: 14px;
          color: $f_normal;
        }
        .good-box {
          margin-bottom: 20px;
          padding: 25px 0 25px 25px;
          background: #f7f9ff;
          border: solid 1px $border_color;
          .goods-img {
            float: left;
            margin-right: 25px;
            width: 140px;
            height: 140px;
            border: solid 1px $border_color;
          }
          .goods-name {
            margin-top: 8px;
            float: left;
            width: 350px;
            height: 40px;
            font-size: $fz_16;
            line-height: 1.25;
            color: $f_main;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
          }
          .goods-info {
            float: left;
            display: flex;
            width: 966px;
            height: 92px;
            align-items: center;
            text-align: center;
            color: $f_main;
            .goods-spec {
              text-align: left;
            }
            .original-price {
              padding-left: 4px;
              color: $f_sub;
            }
            .good-selloff {
              opacity: 0;
              font-size: $fz_14;
              &.active {
                opacity: 1;
              }
            }
            .good-sum {
              color: $red;
            }
          }
        }
        .store-foot {
          margin: 20px 0;
          font-size: $fz_14;
          .remark {
            float: left;
            .input-remark {
              margin-left: 10px;
              padding-left: 10px;
              width: 400px;
              height: 28px;
              border: solid 1px $border_color;
              &:disabled {
                background: $bg_color;
                cursor: no-drop;
              }
            }
          }
          .store-total {
            float: right;
            text-align: right;
            font-size: 14px;
            line-height: 28px;
            color: $f_normal;
          }
        }
      }
    }
    .good {
      flex: 1;
    }
    .price {
      width: 160px;
    }
    .amount {
      width: 140px;
    }
    .selloff {
      width: 150px;
    }
    .sum {
      width: 150px;
    }
  }
  .order-census {
    position: relative;
    margin: 25px 0;
    padding: 10px 25px;
    text-align: right;
    font-size: 14px;
    color: $f_normal;
    background: #ffffff;
    border: solid 1px $border_color;
    .tips {
      position: absolute;
      top: 25px;
      left: 25px;
      margin: 0;
    }
    p {
      margin: 15px 0;
    }
    .price {
      font-size: $fz_20;
      color: $red;
    }
  }
}
</style>
